<template>
  <div class="m-container" v-loading="loading">
    <el-steps :active="active">
      <el-step title="设置名称" description="设置工资任务名称及要求"></el-step>
      <el-step title="各部门绩效总额" description="设置每个部门绩效工资总额"></el-step>
      <el-step title="完成" description="创建完成"></el-step>
    </el-steps>
    <!-- 分割线 -->
    <el-divider content-position="right">
      <el-button type="primary" plain @click="active=active-1" v-show="active>1" :disabled="finished">上一步</el-button>
      <el-button type="primary" plain @click="next" v-show="active<3" :disabled="finished">下一步</el-button>
      <el-button type="primary" plain @click="next" v-show="active==3" :disabled="finished">完成创建</el-button>
    </el-divider>
    <!-- 表单 -->
    <el-form :model="taskForm" :rules="createTaskRules" ref="taskForm" label-width="100px" style="height: 100%">

      <el-row type="flex" justify="space-around" v-show="active==1">
        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="taskForm.name" maxlength="30" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="任务类型" prop="taskType">
            <el-select v-model="taskForm.taskType" placeholder="请选择任务类型">
              <el-option label="月工资" value="月工资"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="说明" prop="note">
            <el-input v-model="taskForm.note" type="textarea" maxlength="100" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-show="active==2" style="height: 80%;">
        <el-table :data="taskForm.taskDepts" style="width: 100%;" height="95%">
          <el-table-column prop="id" label="编号" width="80" fixed></el-table-column>
          <el-table-column prop="name" label="部门名称" width="180"></el-table-column>
          <!-- <el-table-column prop="cadreCount" label="干部人数" width="180" fixed></el-table-column> -->
          <!-- <el-table-column prop="staffCount" label="职工人数" width="180" fixed></el-table-column> -->
          <el-table-column prop="meritPay" label="往期余额" width="180"></el-table-column>
          <el-table-column label="本次工资总额" width="240">
            <template #header>
              <el-tag type="danger">总额: {{wageSum}}</el-tag>
            </template>
            <template #default="scope" prop="totalWage">
              <el-input type="number" min="0" max="500000" v-model="scope.row.totalWage" v-if="getRowState(scope.row)" reqired>
                <template #prepend>¥</template>
              </el-input>
              <h3 v-show="!getRowState(scope.row)">{{scope.row.totalWage}}</h3>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button @click="changeRowState(scope.row)" type="text" size="small">{{scope.row.edit?'确定':'编辑'}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="note" label="备注">
            <template #default="scope">
              <el-button type="text" size="small" @click="addNote(scope.row)">{{scope.row.note}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-row type="flex" justify="space-around" v-show="active==3">
        <el-col :span="8">
          <h1>
            <p>名称：{{taskForm.name}}</p>
            <p>金额：¥{{wageSum}}元</p>
            <p>说明：{{taskForm.note}}</p>
          </h1>
        </el-col>
      </el-row>

    </el-form>
  </div>
  <el-dialog title="备注" v-model="dlgNote" width="30%">
    <el-input v-model="currentRow.note" type="textarea" placeholder="请输入备注" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dlgNote = false">取 消</el-button>
        <el-button type="primary" @click="dlgNote = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent,computed } from 'vue'
import { createTaskRules } from '@/api/rules'
import { getTaskDepts, createWageTask, saveWageTask } from '@/api/salary'
import { ElMessage } from 'element-plus'
import { useStore} from 'vuex'
import useScroll from "@/views/layout/tag-views/hooks/useScroll";
import useTag from '@/views/layout/tag-views/hooks/useTag'
import _ from 'lodash'
export default defineComponent ({
  name: 'CreateTask',
  setup(props) {
    const $store = useStore()
    const { refresh , scrollToElement }= useScroll()
    const tags = computed(()=>{
      return  $store.getters.tags
    })
    return {
      createTaskRules,
      tags,
      ...useTag(scrollToElement,refresh)
    }
  },
  data() {
    return {
      active: 1,
      taskForm: {
        name: '',
        note: '无特殊说明',
        taskType: '月工资',
        totalWage: this.wageSum,
        taskDepts: []
      },
      finished: false,
      dlgNote: false,
      currentRow: { note: '' },
      loading: false
    };
  },
  created() {
    this.loadTaskInfo()
  },
  methods: {
    // 从服务器加载任务信息
    loadTaskInfo() {
      this.loading = true
      createWageTask().then(res => {
        console.log(res)
        this.taskForm.taskDepts = res.data
        this.loading = false
      })
    },
    next() {
      let vm = this as any
      // 第一步
      if(this.active === 1) {
        vm.$refs.taskForm.validate((valid:any) => {
          if(valid) {
            this.active += 1
          }
        })
      }
      else if(this.active === 2) {
        for(let row of this.taskForm.taskDepts) {
          let r = row as any
          if(r.edit) {
            ElMessage.error(`请确认  "${r.name}"  的金额!`)
            return
          }
        }
        vm.$confirm('确认要提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.active += 1
        }).catch(() => {});
      }
      else {
        this.loading = true
        // 创建工资任务
        saveWageTask(this.taskForm).then(res => {
          let r = res as any
          if(r.code === 20000) {
            ElMessage.success('创建任务成功!')
            this.finished = true
          }
          this.loading = false
        })
      }
    },
    // 获取部门工资列表
    getDepts() {
      getTaskDepts().then(res => {
        this.taskForm.taskDepts = res.data
        console.log(res.data)
      })
    },
    changeRowState(row: any) {
      row.totalWage = _.toNumber(row.totalWage)
      row.edit=!row.edit
    },
    // 获取行状态
    getRowState(row: any) {
      return row.edit || false
    },
    // 添加说明
    addNote(row: any) {
      this.currentRow = row
      this.dlgNote = true
    }
  },
  computed: {
    // 工资总额
    wageSum() {
      let sum = 0
      for(let row of this.taskForm.taskDepts) {
        let r = row as any
        sum += Number(r.totalWage)
      }
      return sum
    }
  }
});
</script>

<style>
  .step-container {
    padding: 20px;
    overflow: auto;
  }
</style>